<template>
  <div class="restaurants-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1>🏪 推荐餐厅</h1>
        <p>发现您身边的优质餐厅，品味地道美食</p>
      </div>
    </div>
    
    <div class="container">
      <!-- 搜索栏 -->
      <div class="search-section">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索餐厅名称、菜系或地址..."
          class="search-input"
          size="large"
          @input="searchRestaurants"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
      <!-- 餐厅网格 -->
      <div v-loading="loading" class="restaurants-grid grid grid-3">
        <div v-for="restaurant in filteredRestaurants" :key="restaurant.id" class="restaurant-card" @click="goToRestaurant(restaurant.id)">
          <div class="restaurant-image-container">
            <img :src="restaurant.image" :alt="restaurant.name" class="restaurant-image">
            <div class="restaurant-overlay">
              <div class="cuisine-tag">{{ restaurant.cuisine }}</div>
            </div>
          </div>
          <div class="restaurant-info">
            <h3>{{ restaurant.name }}</h3>
            <p class="address">📍 {{ restaurant.address }}</p>
            <p class="business-hours">🕒 {{ restaurant.businessHours }}</p>
            <p class="phone">📞 {{ restaurant.phone }}</p>
            <div class="restaurant-features">
              <span v-for="feature in restaurant.features" :key="feature" class="feature-tag">{{ feature }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredRestaurants.length === 0" class="empty-state">
        <div class="empty-icon">🔍</div>
        <h3>未找到相关餐厅</h3>
        <p>请尝试其他关键词搜索</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'RestaurantsView',
  components: {
    Search
  },
  data() {
    return {
      searchKeyword: '',
      restaurants: [],
      loading: false
    }
  },
  computed: {
    filteredRestaurants() {
      if (!this.searchKeyword) {
        return this.restaurants
      }
      return this.restaurants.filter(restaurant =>
        restaurant.name.includes(this.searchKeyword) ||
        restaurant.cuisine.includes(this.searchKeyword) ||
        restaurant.address.includes(this.searchKeyword)
      )
    }
  },
  mounted() {
    this.loadRestaurants()
  },
  methods: {
    async loadRestaurants() {
      this.loading = true
      try {
        const response = await fetch('http://localhost:2077/api/public/merchants', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
          mode: 'cors'
        })
        
        if (!response.ok) {
          const errorText = await response.text()
          throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
        }
        
        const data = await response.json()
        
        if (data.success) {
          this.restaurants = data.data.map(merchant => ({
            id: merchant.id,
            name: merchant.name,
            address: merchant.address,
            cuisine: merchant.cuisine || '综合菜系',
            image: merchant.image,
            features: merchant.features || [],
            businessHours: merchant.businessHours,
            phone: merchant.phone,
            description: merchant.description
          }))
        } else {
          ElMessage.error(data.message || '加载餐厅数据失败')
        }
      } catch (error) {
        ElMessage.error('加载餐厅数据失败')
      } finally {
        this.loading = false
      }
    },
    
    async approveAllMerchants() {
      try {
        const response = await fetch('http://localhost:2077/api/public/merchants/approve-all', {
          method: 'POST'
        })
        const data = await response.json()
        
        if (data.success) {
          ElMessage.success(data.message)
          // 重新加载商家列表
          this.loadRestaurants()
        } else {
          ElMessage.error(data.message || '批量审核失败')
        }
      } catch (error) {
        ElMessage.error('批量审核失败')
      }
    },
    
    searchRestaurants() {
      // 搜索逻辑已通过computed属性实现
    },
    goToRestaurant(id) {
      this.$router.push(`/merchant/${id}`)
    }
  }
}
</script>

<style scoped>
.restaurants-view {
  min-height: 100vh;
}

.search-section {
  max-width: 600px;
  margin: 0 auto var(--spacing-xl) auto;
  padding: 0 var(--spacing-md);
}

.search-input {
  width: 100%;
  border-radius: var(--radius-xl) !important;
}

.search-input .el-input__wrapper {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 2px solid var(--border-light) !important;
  transition: all 0.3s ease !important;
}

.search-input .el-input__wrapper:hover {
  border-color: var(--primary-light) !important;
}

.search-input .el-input__wrapper.is-focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.restaurants-grid {
  padding: var(--spacing-lg) 0;
}

.restaurant-card {
  background: var(--background-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

.restaurant-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-xl);
}

.restaurant-image-container {
  position: relative;
  overflow: hidden;
}

.restaurant-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.restaurant-card:hover .restaurant-image {
  transform: scale(1.1);
}

.restaurant-overlay {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.cuisine-tag {
  background: var(--gradient-secondary);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.status-tag {
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.status-tag.approved {
  background: #10b981;
  color: white;
}

.status-tag.pending {
  background: #f59e0b;
  color: white;
}

.restaurant-info {
  padding: var(--spacing-lg);
}

.restaurant-info h3 {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}



.address,
.business-hours,
.phone {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-size: 0.9rem;
  line-height: 1.5;
}

.restaurant-features {
  margin-top: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.feature-tag {
  background: var(--background-accent);
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--border-light);
}

.empty-state {
  text-align: center;
  padding: var(--spacing-xl) 0;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-state h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.empty-state p {
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-section {
    padding: 0;
  }
  
  .restaurant-card {
    margin-bottom: var(--spacing-md);
  }
  
  .restaurant-image {
    height: 180px;
  }
  
  .restaurant-info {
    padding: var(--spacing-md);
  }
  
  .restaurant-info h3 {
    font-size: 1.1rem;
  }
  
  .restaurant-features {
    gap: var(--spacing-xs);
  }
  
  .feature-tag {
    font-size: 0.75rem;
    padding: 3px 6px;
  }
}

@media (max-width: 480px) {
  .restaurant-image {
    height: 160px;
  }
  
  .restaurant-info {
    padding: var(--spacing-sm);
  }
  
  .empty-icon {
    font-size: 3rem;
  }
}
</style> 